<template>
  <div class="dashboard-container">
    <Notify type="danger" title="你有五条待办工作记录已延期10天,请立即处理" btn-title="立即处理" />
    <el-row :gutter="20" align="top" style="padding-top: 20px">
      <!-- 核心数据展示 -->
      <el-col :span="17">
        <MainData :statistic-data="statisticData" />
      </el-col>
      <!-- 通知公告 -->
      <el-col :span="7">
        <Notice :notifys="statisticData.notifys ?? new Array()" />
      </el-col>
    </el-row>

    <el-row :gutter="20" align="top" style="padding-top: 20px">
      <el-col :span="17">
        <el-row :gutter="20">
          <!-- 项目考勤统计 -->
          <el-col :span="7" :offset="0">
            <StatisticalCharts width="100%" height="300px" />
          </el-col>
          <!-- 待办事项 -->
          <el-col :span="11" :offset="0">
            <ToDo />
          </el-col>
          <!-- 项目专户余额-项目保证金余额-项目进账总额 -->
          <el-col :span="6" :offset="0">
            <ProjectInfo></ProjectInfo>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="7">
        <!-- 操作动态 -->
        <div>
          <Action />
        </div>
        <!-- 常用功能 -->
        <div style="padding-top: 15px">
          <GeneralFun />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import Notify from "./components/Notify.vue";
import MainData from "./components/MainData.vue";
import Notice from "./components/Notice.vue";
import StatisticalCharts from "./components/StatisticalCharts.vue";
import ToDo from "./components/ToDo.vue";
import Action from "./components/Action.vue";
import GeneralFun from "./components/GeneralFun.vue";
import ProjectInfo from "./components/ProjectInfo.vue";
import { GetHomeStatistic } from "@/api/dashboard/index";
import { HomeStatistic } from "@/api/dashboard/types";

const statisticData = ref<HomeStatistic>({});
const loading = ref(false);
onMounted(async () => {
  loading.value = true;
  let res = await GetHomeStatistic();
  loading.value = false;
  if (res.type == 0) {
    if (res.success) {
      statisticData.value = res.data;
    }
  }
});
</script>
<style lang="scss" scoped>
.dashboard-container {
  font-family: SourceHanSansCN;
  position: relative;
  padding: 0 25px 0 25px;
}
</style>
